<template>
  <el-popover
    v-model="popoverVisible"
    placement="bottom-start"
    width="332"
    trigger="click"
    popper-class="basic-settings-popover-container"
    @show="setColor"
    @after-leave="resetInfo">
    <div class="popover-content">
      <template v-for="item in iconData">
        <div :key="item.name" :style="{ backgroundImage: icon === item.name ? `url(${getBg(iconColor)})` : ''}" class="icon-item-outbox">
          <div
            :style="{ background: iconColor }"
            class="icon-item"
            @click="handleIconSelected(item.name)">
            <img :src="item.icon">
            <!--<img v-if="icon === item.name" :src="iconSelectImg" class="icon-select-img" alt="选中">-->
          </div>
        </div>
      </template>
      <div class="line" />
      <div class="color-group">
        <template v-for="color in colors">
          <div :key="color" class="out-box">
            <div
              :style="{ backgroundImage: iconColor === color ? `url(${getBg(iconColor, false)})` : ''}"
              class="color-badge-box">
              <div :style="{ background: color }" class="color-badge" @click="handleColorSelected(color)" />
            </div>
          </div>
        </template>
      </div>
      <div class="footer-operate-btn">
        <el-button :disabled="!icon" type="primary" size="small" class="ok" @click="handleConfirm">确认</el-button>
        <el-button class="cancel-btn-style" size="small" type="info" @click="popoverClose">取消</el-button>
      </div>
    </div>
    <el-button slot="reference" type="text" class="reference-btn">选择图标</el-button>
  </el-popover>
</template>

<script>
import iconConfig from '@/mixins/iconConfig';
import iconSelectImg from '@/assets/customProcess/icon-select.png';
import outBorder0 from '@/assets/config/out-border-0.png';
import outBorder1 from '@/assets/config/out-border-1.png';
import outBorder2 from '@/assets/config/out-border-2.png';
import outBorder3 from '@/assets/config/out-border-3.png';
import outBorder4 from '@/assets/config/out-border-4.png';
import outBorder5 from '@/assets/config/out-border-5.png';
import outBorder6 from '@/assets/config/out-border-6.png';
import outBorder7 from '@/assets/config/out-border-7.png';
import outBorder8 from '@/assets/config/out-border-8.png';
import outBorder9 from '@/assets/config/out-border-9.png';
import outBorder10 from '@/assets/config/out-border-10.png';
import outBorder11 from '@/assets/config/out-border-11.png';
import outBorder12 from '@/assets/config/out-border-12.png';
import outBorder13 from '@/assets/config/out-border-13.png';
import borderBg0 from '@/assets/config/border-icon-0.png';
import borderBg1 from '@/assets/config/border-icon-1.png';
import borderBg2 from '@/assets/config/border-icon-2.png';
import borderBg3 from '@/assets/config/border-icon-3.png';
import borderBg4 from '@/assets/config/border-icon-4.png';
import borderBg5 from '@/assets/config/border-icon-5.png';
import borderBg6 from '@/assets/config/border-icon-6.png';
import borderBg7 from '@/assets/config/border-icon-7.png';
import borderBg8 from '@/assets/config/border-icon-8.png';
import borderBg9 from '@/assets/config/border-icon-9.png';
import borderBg10 from '@/assets/config/border-icon-10.png';
import borderBg11 from '@/assets/config/border-icon-11.png';
import borderBg12 from '@/assets/config/border-icon-12.png';
import borderBg13 from '@/assets/config/border-icon-13.png';
export default {
  mixins: [iconConfig],
  props: {
    iconInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      iconSelectImg,
      popoverVisible: false,
      icon: '',
      iconColor: 'linear-gradient(151deg,#46b0ff 24%, #4468ff 93%)'
    };
  },
  computed: {
    colors() {
      return [
        'linear-gradient(151deg,#46b0ff 24%, #4468ff 93%)',
        'linear-gradient(129deg,#ff418d 3%, #5241ff 97%)',
        'linear-gradient(40deg,rgba(190,132,255,0.97) 5%, #0ddb9c 80%)',
        'linear-gradient(317deg,#9271ff 3%, #59d2ff 86%)',
        'linear-gradient(147deg,#ff96bb 13%, #f21368 92%)',
        'linear-gradient(145deg,#ffe836 10%, #1ecec7 83%)',
        'linear-gradient(303deg,rgba(70,70,253,0.97) 5%, #9271ff 76%)',
        'linear-gradient(304deg,#4993de 7%, #40ded8 78%)',
        'linear-gradient(136deg,#49de5e 18%, #46cea2 85%)',
        'linear-gradient(162deg,#f9cb21 12%, #fe7137 100%)',
        'linear-gradient(329deg,#00b7ff 10%, #ff8c8c 87%)',
        'linear-gradient(147deg,#f8cc69 13%, #f21313 92%)',
        'linear-gradient(325deg,#2f5fff 16%, #f580ff 83%)',
        'linear-gradient(151deg,rgba(255,190,43,0.97) 16%, #7858ff 74%)'
      ];
    },
    colorBgList() {
      return [
        borderBg0,
        borderBg1,
        borderBg2,
        borderBg3,
        borderBg4,
        borderBg5,
        borderBg6,
        borderBg7,
        borderBg8,
        borderBg9,
        borderBg10,
        borderBg11,
        borderBg12,
        borderBg13
      ];
    },
    outBgList() {
      return [
        outBorder0,
        outBorder1,
        outBorder2,
        outBorder3,
        outBorder4,
        outBorder5,
        outBorder6,
        outBorder7,
        outBorder8,
        outBorder9,
        outBorder10,
        outBorder11,
        outBorder12,
        outBorder13
      ];
    }
  },
  watch: {
    iconInfo: {
      handler(data) {
        this.icon = data.icon;
        this.iconColor = this.colors.includes(data.iconColor) && data.iconColor ? data.iconColor : this.colors[0];
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleIconSelected(iconName) {
      this.icon = iconName;
    },
    handleColorSelected(color) {
      this.iconColor = color;
    },
    handleConfirm() {
      this.popoverClose();
      this.$emit('handleIconChange', { icon: this.icon, iconColor: this.iconColor });
    },
    popoverClose() {
      this.popoverVisible = false;
    },
    resetInfo() {
      this.icon = this.iconInfo.icon;
      this.iconColor = this.iconInfo.iconColor || this.colors[0];
    },
    getBg(color, isOutBorder = true) {
      const index = this.colors.findIndex(j => j === color);
      return isOutBorder ? this.outBgList[index] : this.colorBgList[index];
    },
    setColor() { // 处理旧数据
      this.iconColor = this.colors.includes(this.iconColor) && this.iconColor ? this.iconColor : this.colors[0];
    }
  }
};
</script>

<style lang="scss">
.basic-settings-popover-container {
  font-size: 14px;
  padding: 12px 20px 20px !important;
  margin-top: 0 !important;
  border-radius: 8px;
}
</style>
<style lang="scss" scoped>
.reference-btn {
  font-size: 14px;
  height: 32px;
  padding: 0;
  color: #333;
}
.reference-btn:hover {
  color: #406eff;
}
.popover-content {
  display: flex;
  flex-wrap: wrap;
  .icon-item-outbox {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    margin: 0 10px 10px 0;
    .icon-item {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      img {
        width: 24px;
        height: 24px;
      }
      .icon-select-img {
        width: 48px;
        height: 48px;
        position: absolute;
        right: -7px;
        bottom: -7px;
      }
    }
  }
  .icon-item:nth-child(5n) {
    margin-right: 0;
  }
  .line {
    width: 100%;
    border-bottom: 1px solid #ebeefd;
  }
  .color-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    width: 100%;
    .out-box {
      flex-basis: calc(100% / 7);
    }
    .color-badge-box {
      width: 30px;
      height: 30px;
      padding: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: 100% 100%;
      .color-badge {
        width: 100%;
        height: 100%;
        cursor: pointer;
        border-radius: 50%;
      }
    }
  }
  .footer-operate-btn {
    width: 100%;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
